
<script>

	$(function(){
		$("button").button();
	});
	
	$("#elName").keyup(function(event){
		  if(event.keyCode == 13){
		    $("#addItem").click();
		  }
		});
	
	function addItem(){
		var text = document.getElementById('elName').value;
		if(text!=null && text!=""){
			document.addOtherElements.otherElements.options[document.addOtherElements.otherElements.options.length] = new Option(text);
			document.getElementById('elName').value = null;
		}
	}
	
	function generateWspace(){
		var index = 0;
		var elements = '';
		$("#otherElements option").each(function(){
			if(index++>0){
				elements+='~';
			}
			elements+=$(this)[0].value;
		});
		var arguments = "matrixSize="+index+"&elements="+elements;
		ajaxCall("dataAccessManager", "15", arguments, null);
		
		loadAHPWorkspace("content/project/devTools/workspace/prioritization/generateWorkspace.jsp");
	}

</script>
<div style="width:80%; margin-left:auto; margin-right:auto">
<div>
	<input type="text" id="elName" name="elName" style="width:75%; float:left">
	<button id="addItem" name="addItem" onclick="addItem()" style="width:22%; font-weight: bold; font-size:smaller; margin-left:2%; float:left;">Add</button>
	<div style="clear:both"></div>
</div>

<div style="margin-top:10px">
	<form name="addOtherElements">
		<select name="otherElements" id="otherElements" size="6" style="width:100%"></select>
	</form>
</div>

<div id="showPrioritize">
	<button id="generateWspace" name="generateWspace" onclick="generateWspace()" style="width:80%; margin-top:5px; font-weight: bold; font-size:smaller; float:center;">Generate workspace</button>
</div>
</div>